<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <div class="card-body" v-loading="loading">

                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    :default-sort="{prop: 'date', order: 'descending'}"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        align="center"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="公司名称"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="申请用户"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        label="是否会员"
                                        align="center"
                                        width="80">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.isVip">是</p>
                                        <p v-else>否</p>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="created_at"
                                        label="创建时间"
                                        sortable
                                        align="center"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEdit(scope.row)">通过审核</el-button>
                                        <el-button size="mini" @click="handleMerge(scope.row)">并入已有公司</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row._id)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="float: right;">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="total" :hide-on-single-page="pageActive"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--公司审核-->
        <el-dialog title="公司审核" :visible.sync="dialogEditFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="公司简称" :label-width="formLabelWidth">
                    {{ form.editName }}
                </el-form-item>

                <el-form-item label="公司别称" :label-width="formLabelWidth">
                    <el-tag
                            :key="tag"
                            v-for="tag in editAlternativeName"
                            closable
                            :disable-transitions="false"
                            @close="handleEditClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            @keyup.enter.native="handleEditInputConfirm"
                            @blur="handleEditInputConfirm"
                            style="width: 80%;"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加公司别称
                    </el-button>
                </el-form-item>
                <el-form-item label="关联分类" :label-width="formLabelWidth">
                    <el-autocomplete
                            v-model="form.editIndustryName"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入内容"
                            @select="handleEditSelect"
                            style="width: 100%"
                    ></el-autocomplete>
                    <el-tag
                            :key="tag.id"
                            v-for="tag in editIndustryTags"
                            closable
                            :disable-transitions="false"
                            @close="handleEditIndustryClose(tag)">
                        {{tag.value}}
                    </el-tag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateCompany">通过审核并保存</el-button>
            </div>
        </el-dialog>
        <!--合并部分-->
        <el-dialog title="并入已有公司" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="公司简称" :label-width="formLabelWidth">
                    {{ form.editName }}
                </el-form-item>

                <el-form-item label="并入公司" :label-width="formLabelWidth">
                    <el-autocomplete
                            v-model="form.companyName"
                            :fetch-suggestions="queryCompanyAsync"
                            placeholder="请输入内容"
                            @select="handleCompanySelect"
                            style="width: 100%"
                    ></el-autocomplete>
                    <el-tag
                            v-if="companyTags.id"
                            closable
                            :disable-transitions="false"
                            @close="handleCompanyClose(companyTags)">
                        {{companyTags.value}}
                    </el-tag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSave">确定合并</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "CompanyVerifyComponent",
        data() {
            return {
                pageActive: true,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: false,
                activeIndex: 1,
                name: '',
                form: {
                    editName: "",
                    editIndustryName: "",
                    companyName:""
                },
                formLabelWidth: '120px',
                dialogEditFormVisible: false,
                inputVisible: false,
                inputValue: '',
                restaurants: [],
                state: '',
                timeout: 3000,
                id: 0,
                //修改部分
                editAlternativeName: [],
                editIndustryTags: [],
                editIndustryIds: [],
                dialogFormVisible:false,
                companyTags:{},
                companyId:0
            }
        },
        methods: {
            search: function () {
                let self = this;
                let uri = 'company/post-list';
                self.loading = true;

                let postData = {
                    startTime: self.startTime, endTime: self.endTime,
                    keyword: self.keyword,
                    page: self.currentPage,
                    verifyStatus: 0
                };

                axios.post(uri,postData).then(function (result) {
                    self.total = result.companies.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.companies.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleEditInputConfirm() {
                let inputValue = this.inputValue;

                if (inputValue && this.editAlternativeName.indexOf(inputValue) == -1) {
                    this.editAlternativeName.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            handleEditClose(tag) {
                this.editAlternativeName.splice(this.editAlternativeName.indexOf(tag), 1);
            },//查询分类
            async queryIndustry(keyword = '') {
                let self = this;
                let uri = "category/search/"+keyword;
                axios.get(uri).then(function (result) {
                    self.restaurants = result.list;
                });
            },
            async querySearchAsync(queryString, cb) {
                await this.queryIndustry(queryString);
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            handleIndustryClose(tag) {
                this.categoryTags.splice(this.categoryTags.indexOf(tag), 1);
                this.categoryIds.push(tag.id);
            },
            submitCompany() {
                let self = this;
                self.loading = true;
                let uri = "company/store";
                let postData = {
                    name: self.form.name, alternativeName: self.alternativeName,
                    categoryIds: self.categoryIds
                };
                axios.post(uri,postData).then(function (result) {
                    self.loading = false;
                    self.dialogFormVisible = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            indexMethod: function (index) {
                return index + 1;
            },
            formatIndustry: function (row, column) {
                return this.filterLength(row.categoryStr);
            },
            formatAlternative: function (row, column) {
                //return row.alternativeNameStr;
                return this.filterLength(row.alternativeNameStr, 6);
            },
            filterLength: function (str, length = 9) {
                if (str.length >= length) {
                    return str.substring(0, length) + '...';
                }
                return str;
            },
            handleDelete: function (id) {
                let self = this;
                self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "company/" + id;
                axios.delete(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            async queryCompany(keyword = '') {
                let self = this;
                let uri = "company/search/"+keyword;
                axios.get(uri).then(function (result) {
                    self.companies = result.list;
                });
            },
            async queryCompanyAsync(queryString, cb) {
                await this.queryCompany(queryString);
                var restaurants = this.companies;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            handleCompanySelect(item) {
                this.companyTags = item;
                this.companyId = item.id;
                this.form.companyName = "";
            },
            handleCompanyClose(tag) {
                this.companyTags = {};
                this.companyId = 0;
            },
            handleMerge: function (row) {
                this.dialogFormVisible = true;
                this.form.editName = row.name;
                this.id = row._id;
                this.form.companyName = "";
            },
            handleEdit: function (row) {
                this.form.editIndustryName = '';
                this.dialogEditFormVisible = true;

                let data = row;

                this.editAlternativeName = data.alternativeName;

                this.editIndustryIds = [];

                let categoryNames = data.categoryNames;
                categoryNames.forEach((item) => {
                    this.editIndustryIds.push(item.id)
                });
                this.editIndustryTags = data.categoryNames;
                this.form.categoryName = '';
                this.form.editName = data.name;
                this.id = data._id;
            },
            handleEditIndustryClose(tag) {
                this.editIndustryTags.splice(this.editIndustryTags.indexOf(tag), 1);
                this.editIndustryIds.splice(this.editIndustryIds.indexOf(tag.id), 1);
            },
            handleEditSelect(item) {
                if (item && this.editIndustryIds.indexOf(item.id) == -1) {
                    this.editIndustryTags.push(item);
                    this.editIndustryIds.push(item.id);
                }
                this.form.editIndustryName = '';
            },
            updateCompany() {
                let self = this;
                self.loading = true;
                let uri = "company/update/" + self.id;
                let postData = {
                    alternativeName: self.editAlternativeName,
                    categoryIds: self.editIndustryIds,
                    verifyStatus: 1
                };

                self.dialogEditFormVisible = false;

                axios.put(uri,postData).then(function (result) {
                    self.loading = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            confirmSave:function () {
                let self = this;
                self.loading = true;
                if(!self.companyId){
                    self.$message.error('请选择要合并到那个公司中！');
                    return;
                }
                let uri = "company/merge/" + self.companyId+'/'+self.id;
                self.dialogFormVisible = false;
                axios.get(uri).then(function (result) {
                    self.loading = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            }
        },
        mounted() {
            this.search();
            this.queryIndustry();
            this.queryCompany();
        }
    }
</script>

<style scoped>

</style>
